<template>
  <div class="side-left-right">
    <div class="item-plane">
      <div class="item_1">
        <div class="box-parent">
          <div class="head">
            <span class="title">养老院介绍</span>
          </div>
          <div class="box">
            <img src="/imgs/nindex/tu1.png">
            <span>堇心颐养中心，位于鄞州区首南街道鄞州大道中段555号。是集医疗、康复、护理、养老、娱乐于一体的智慧养老机构。</span>
          </div>
        </div>
      </div>
      <div class="item_2">
        <div class="box-parent">
          <div class="head">
            <span class="title">总览统计</span>
          </div>
          <div class="box">
            <div class="box1">
              <div class="box1-1"></div>
              <div class="box1-2">
                <span class="title">楼栋数量</span>
                <span class="value">12
                  <span class="unit">幢</span>
                </span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-1"></div>
              <div class="box1-2">
                <span class="title">建筑面积</span>
                <span class="value">12598
                  <span class="unit">㎡</span>
                </span>
              </div>
            </div>
            <div class="box2">
              <span class="title">院内人数</span>
              <piechartKj3D v-if="pieData.length > 0" class="chartsGl" :datalist="pieData" width="205px" height="105px">
              </piechartKj3D>
              <div class="box2-2">
                <div class="box2-2-1">
                  <span class="title2">男性</span>
                  <span class="title3">{{ maleValue }}</span>
                  <span class="title4">{{ malePer }}%</span>
                </div>
                <div class="box2-2-2">
                  <span class="title2">女性</span>
                  <span class="title3">{{ femaleValue }}</span>
                  <span class="title4">{{ femalePer }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item_3">
        <div class="box-parent">
          <div class="head">
            <span class="title">消防设备统计</span>
          </div>
          <div class="box">
            <div class="box1">
              <div class="box1-1"></div>
              <div class="box1-2">
                <span class="value">10
                  <span class="unit">个</span>
                </span>
                <span class="title">烟感</span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-1-2"></div>
              <div class="box1-2">
                <span class="value">10
                  <span class="unit">个</span>
                </span>
                <span class="title">手报</span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-1-3"></div>
              <div class="box1-2">
                <span class="value">10
                  <span class="unit">个</span>
                </span>
                <span class="title">消火栓</span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-1-4"></div>
              <div class="box1-2">
                <span class="value">10
                  <span class="unit">个</span>
                </span>
                <span class="title">喷淋</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import sList from "cmpt/table.vue";
import { loginUser } from "@/api/indexapi3";
import { peopleList } from "@/api/indexapi4";
import { computed, onMounted, nextTick, ref } from "vue";
import apis from '@/api/indexapi.js';
import piechartKj3D from "../../components/chart/chartPie.vue";
const videoUrl = ref('');
const searchBarStyle = "margin: 0 auto;margin-top: 10px;width:100%;height:32px;";
//请求的实例
const _api = apis();
//男性数量
const maleValue = ref(0);
//男性百分比
const malePer = ref(0);
//女性数量
const femaleValue = ref(0);
//女性百分比
const femalePer = ref(0);

const pieData = ref([
  { name: "男性", value: 0, itemStyle: { color: '#49A5F7' } },
  { name: "女性", value: 0, itemStyle: { color: '#F87352' } },
]);



function listHead(k, v, w, icon, ev, s, color) {
  return {
    k,
    v,
    w,
    icon: icon || null,
    click: ev || null,
    sort: s,
    color: color || null
  };
}
const dtjHead = ref([]);
const dtjDts = ref([]);
const reflst = ref();
const headStl = "width:100%; height:32px;background-size: 100% 100%; background-position: center center;margin: 0 auto;"
const itemStl = "background-repeat: no-repeat; background-image:url('/imgs/nw/图层 1301.png'); width:100%; height:28px;margin: 0 auto; margin-top: 4px; background-size: 100% 100%; background-position: center center;"
dtjHead.value = [
  listHead("product", "工序", null, null, null, false,),
  listHead("type", "类型", null, null, null, false,),
  listHead("kg", "产量kg", null, null, null, false,),
  // listHead("huanbi", "同比", null, null, null, false,),
  // listHead("tongbi", "环比", null, null, null, false,),
];
const dtjHead2 = ref([]);
const dtjDts2 = ref([]);
const reflst2 = ref();
dtjHead2.value = [
  listHead("orderNum", "工单号", '90px', null, null, false,),
  listHead("state", "状态", null, null, null, false,),
  listHead("plan", "计划数", null, null, null, false,),
  listHead("complete", "完成数", null, null, null, false,),
  listHead("rate", "达成率", null, null, null, false,),
];
const annualValue = ref([
  { name: '建筑面积', url: "/imgs/hf/area.png", bg: "/imgs/hf/line.png", value: 10000 },
  { name: '团队成员', url: "/imgs/hf/people.png", bg: "/imgs/hf/line.png", value: 200 },
  { name: '每年投入', url: "/imgs/hf/money.png", bg: "/imgs/hf/line.png", value: 6000 },
])

const contentList = ref([
  {
    text: '先导薄膜材料有限公司作为先导公司的子公司成立于2017年，公司坐落于合肥新站区，位于龙子湖路与通淮路交汇处，公司主要致力于研发、生产和销售旋转平面ITO溅射靶材，以及其他相关产品。产品广泛应用于液晶面板、触摸屏、LED、太阳能电池建筑玻璃等领域。先导薄膜材料有限公司秉承了先导集团优秀的企业文化与管理理念，致力于成为优秀雇主企业和可持续发展企业。',
    images: ['/imgs/hf/g1.png'], // 图片可选
  },
  {
    title: "车间介绍",
    text: '[车间名称]位于[具体位置]，是一个高效能生产车间，专注于高质量产品的制造流程。配备了现代化设备和多条生产线，确保高效率与产品一致性。通过严格的质量控制和国际标准认证(如ISO相关标准编号1)，保证所有出厂产品的高品质。坚持“创新、质量、服务”的理念，致力于为客户创造更大价值。',
    images: ['/imgs/hf/shexiang.png', '/imgs/hf/shexiang.png', '/imgs/hf/shexiang.png'], // 图片可选
  },
  {
    text: '第三个公司介绍内容，包括文本和可能有图片。',
    images: ['/imgs/hf/圆角矩形 1@2x.png'], // 图片可选
    value: 9999999
  },
])
// 跳转到指定的 div
const goTo = (index) => {
  currentIndex.value = index;
}
const currentIndex = ref(0)// 当前展示的 div 索引
const zuo = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  } else {
    currentIndex.value = contentList.value.length - 1;
  }
}
const you = () => {
  if (currentIndex.value < contentList.value.length - 1) {
    currentIndex.value++;
  } else {
    currentIndex.value = 0;
  }
}
const props = defineProps({
  data: {
    type: Object,
    default: {
      nh: null,
      fx: null,
    }
  },
});
const hPageRef = () => { };
onMounted(async () => {
  //获取公钥加密结果
  let res = await loginUser();
  if (res.code == 200) {
    let res2 = await peopleList(res.data.publicKey);
    if (res2.code == 200) {
      res2.result.records.forEach((item) => {
        console.log("拿到数据：", item);
        
        if (item.gender == 1) {
          //男的总数/总人数
          maleValue.value++;
        } else {
          //女的总数/总人数
          femaleValue.value++;
        }
        // 计算百分比并保留一位小数
        malePer.value = parseFloat(((maleValue.value / res2.result.total) * 100).toFixed(1));
        femalePer.value = parseFloat(((femaleValue.value / res2.result.total) * 100).toFixed(1));
        //更新图表
        pieData.value = [
          { name: "男性", value: maleValue.value, itemStyle: { color: '#49A5F7' } },
          { name: "女性", value: femaleValue.value, itemStyle: { color: '#F87352' } },
        ]
      })
    }
  }

  nextTick(() => {
    setTimeout(() => {
      hPageRef();
    }, 500);
  });
});
</script>

<style scoped lang="scss">
.side-left-right {
  overflow: visible;
  padding: 0 0;

  >div {
    height: 100%;
  }
}

.item-plane {
  display: flex;
  justify-content: space-between;
  padding: 0px 0px 0px 0px !important;
  height: calc(100% - 40px) !important;
  margin-bottom: 40px;
}

.item_1 {
  height: 25%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 40px;
    // display: flex;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    height: 290px;
    background-image: url('/imgs/nindex/矩形 1 拷贝 2.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url(/imgs/nindex/title.png);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 70px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;
        text-shadow: 0px 0px 8px rgba(52, 73, 83, 0.82);

      }
    }

    .box {
      top: -18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      position: relative;

      img {
        width: 100%;
        height: 160px;
      }

      span {
        width: 540px;
        height: 77px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 18px;
        color: #2A2E3E;
        line-height: 22px;
        // padding: 15px;
        margin-top: 15px;
      }
    }
  }
}

.item_2 {
  height: 26%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 20px;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    height: 320px;
    background-image: url('/imgs/nindex/矩形 1.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url(/imgs/nindex/title.png);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 70px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;
        text-shadow: 0px 0px 8px rgba(52, 73, 83, 0.82);

      }
    }

    .box {
      top: -14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      align-items: center;
      position: relative;

      .box1 {
        width: 225px;
        height: 80px;
        display: flex;
        background-image: url("/imgs/nindex/组 1730.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .box1-1 {
          margin-left: 22px;
          width: 30px;
          height: 30px;
          background-image: url("/imgs/nindex/建筑.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box1-2 {
          margin-left: 22px;
          display: flex;
          flex-direction: column;
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 15px;
            color: #2A2E3E;
            line-height: 23px;
            opacity: 0.8;
          }

          .value {
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 30px;
            color: #218CFF;
            line-height: 25px;

            .unit {
              width: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 13px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }
        }
      }

      .box2 {
        width:  100%;
        margin-top: 0px;
        height: 170px;
        display: flex;
        background-image: url("/imgs/nindex/组 1728.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .title {
          top: 95px;
          left: 51px;
          position: absolute;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 17px;
          color: #FFFFFF;
          opacity: 0.8;
        }

        .box2-2 {
          margin-top: 60px;
          display: flex;
          width: 100px;
          height: 100px;
          flex-wrap: wrap;
          flex-direction: column;

          .box2-2-1 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }
          }

          .box2-2-2 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722 拷贝.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              height: 14px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }
          }

        }
      }
    }
  }
}

.item_3 {
  height: 31%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 18px;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    height: 250px;
    background-image: url('/imgs/nindex/矩形 1.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url(/imgs/nindex/title.png);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 70px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;
        text-shadow: 0px 0px 8px rgba(52, 73, 83, 0.82);

      }
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      gap: 15px;
      top: -10px;
      .box1 {
        width: 222px;
        height: 90px;
        display: flex;
        background-image: url("/imgs/nindex/组 1730.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // justify-content: space-between;
        align-items: center;

        .box1-1 {
          margin-left: 19px;
          margin-top: 10px;
          width: 58px;
          height: 74px;
          background-image: url("/imgs/nindex/组 1725.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box1-1-2 {
          margin-left: 19px;
          margin-top: 10px;
          width: 58px;
          height: 74px;
          background-image: url("/imgs/nindex/组 1726.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box1-1-3 {
          margin-left: 19px;
          margin-top: 10px;
          width: 58px;
          height: 74px;
          background-image: url("/imgs/nindex/组 1727.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box1-1-4 {
          margin-left: 19px;
          margin-top: 10px;
          width: 58px;
          height: 74px;
          background-image: url("/imgs/nindex/shui.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .box1-2 {
          margin-left: 22px;
          display: flex;
          flex-direction: column;
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 15px;
            color: #2A2E3E;
            line-height: 23px;
          }

          .value {
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 37px;
            color: #FFA200;
            line-height: 25px;

            .unit {
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }
        }
      }

      .box2 {
        width: 480px;
        margin-top: 10px;
        height: 170px;
        display: flex;
        background-image: url("/imgs/nindex/组 1728.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .title {
          top: 98px;
          left: 51px;
          position: absolute;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 17px;
          color: #FFFFFF;
          opacity: 0.8;
        }

        .box2-2 {
          margin-top: 60px;
          display: flex;
          width: 100px;
          height: 100px;
          flex-wrap: wrap;
          flex-direction: column;

          .box2-2-1 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }
          }

          .box2-2-2 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722 拷贝.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              height: 14px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }
          }

        }
      }
    }

  }
}
</style>